import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import mock from '../mock'
import './style.css'
import { ActionBar } from 'react-vant';
import { StarO } from '@react-vant/icons'
function Detail() {
  let [prodinfo,setprodinfo]=useState()
    let pums=useParams()
    let {id}=pums

    console.log(id);
    useEffect(()=>{
      const info=mock.find(data=>{
        return data.id==id
      })
      setprodinfo(info)
    },[])
  return (
    <div>
      {
        prodinfo? <div className='box' >
        <img src={prodinfo.master_diagram} alt=""  className='img1'/>
        <div className='price'>
          ￥{prodinfo.price}
           
        </div>
        <div className='name'>
            {prodinfo.name}
           
            
        </div>
        <div>
         {
           prodinfo.detail_diagram.map((item,index)=>{
            return <img src={item} alt="" className='img1' key={index}/>
           })
         }
        </div>
        <div>
        <ActionBar>
        <ActionBar.Icon
          icon={<StarO  />}
       
        />
        <ActionBar.Button type='warning' text='加入购物车' />
        <ActionBar.Button
          type='danger'
          text='立即购买'
          onClick={() => console.log('button click')}
        />
      </ActionBar>
        </div>
        </div>:null
      }
    </div>
  )
}

export default Detail